<template >
    <section>
        <el-tabs v-model="activeName" @tab-click="handleClick" >
            <el-tab-pane label="实名认证" name="first" @click="getChecks('student')">
                <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                    <el-form :inline="true" :model="filters">
                        <el-form-item>
                            <el-input v-model="filters.name" placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getChecks('student')">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-table :data="studentCheck" highlight-current-row v-loading="teacherLoading" style="width: 100%;">
                    <el-table-column type="index"  label="序号" width="100">
                    </el-table-column>
                    <el-table-column prop="checkUsername" label="申请人">
                    </el-table-column>
                    <el-table-column prop="checkPhone" label="联系方式">
                    </el-table-column>
                    <el-table-column prop="checkCard" label="身份证号">
                    </el-table-column>
                    <el-table-column prop="checkImg" label="资料">
                        <template slot-scope="scope">
                            <img :src="scope.row.checkImg" style="width: 100px;height: 40px;">
                        </template>
                    </el-table-column>
                    <el-table-column prop="checkType" label="审核状态">
                        <template slot-scope="scope">
                            {{getCheckTypeStr(scope.row.checkType) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="160">
                        <template  slot-scope="scope">
                            <el-button size="small" @click="updateType(scope.row,'student',1)">通过</el-button>
                            <el-button type="danger" size="small" @click="updateType(scope.row,'student',2)">驳回</el-button>
                            <!--<el-button type="primary" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="教师认证" name="second" @click="getChecks('teacher')">
                <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                    <el-form :inline="true" :model="filters">
                        <el-form-item>
                            <el-input v-model="filters.name" placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getChecks('teacher')">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-table :data="teacherCheck" highlight-current-row v-loading="schoolLoading" style="width: 100%;text-align: center;">
                    <el-table-column type="index"  label="序号" width="100">
                    </el-table-column>
                    <el-table-column prop="checkUsername" label="申请人">
                    </el-table-column>
                    <el-table-column prop="checkPhone" label="联系方式">
                    </el-table-column>
                    <el-table-column prop="checkCard" label="身份证号">
                    </el-table-column>
                    <el-table-column prop="checkImg" label="资料">
                        <template slot-scope="scope">
                            <img :src="scope.row.checkImg" style="width: 100px;height: 40px;">
                        </template>
                    </el-table-column>
                    <el-table-column prop="checkType" label="审核状态">
                        <template slot-scope="scope">
                            {{getCheckTypeStr(scope.row.checkType) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="160">
                        <template  slot-scope="scope">
                            <el-button size="small" @click="updateType(scope.row,'teacher',1)">通过</el-button>
                            <el-button type="danger" size="small" @click="updateType(scope.row,'teacher',2)">驳回</el-button>
                            <!--<el-button type="primary" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="高校认证" name="third" @click="getChecks('school')">
                <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                    <el-form :inline="true" :model="filters">
                        <el-form-item>
                            <el-input v-model="filters.name" placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getChecks('school')">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-table :data="schoolCheck" highlight-current-row v-loading="schoolLoading" style="width: 100%;text-align: center;">
                    <el-table-column type="index"  label="序号" width="100">
                    </el-table-column>
                    <el-table-column prop="checkUsername" label="申请人">
                    </el-table-column>
                    <el-table-column prop="checkPhone" label="联系方式">
                    </el-table-column>
                    <el-table-column prop="checkCard" label="身份证号">
                    </el-table-column>
                    <el-table-column prop="checkImg" label="资料">
                        <template slot-scope="scope">
                            <img :src="scope.row.checkImg" style="width: 100px;height: 40px;">
                        </template>
                    </el-table-column>
                    <el-table-column prop="checkType" label="审核状态">
                        <template slot-scope="scope">
                            {{getCheckTypeStr(scope.row.checkType) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="160">
                        <template  slot-scope="scope">
                            <el-button size="small" @click="updateType(scope.row,'school',1)">通过</el-button>
                            <el-button type="danger" size="small" @click="updateType(scope.row,'school',2)">驳回</el-button>
                            <!--<el-button type="primary" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="机构认证" name="fourth" @click="getChecks('company')">
                <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                    <el-form :inline="true" :model="filters">
                        <el-form-item>
                            <el-input v-model="filters.name" placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getChecks('company')">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-table :data="companyCheck" highlight-current-row v-loading="companyLoading" style="width: 100%;text-align: center;">
                    <el-table-column type="index"  label="序号" width="100">
                    </el-table-column>
                    <el-table-column prop="checkUsername" label="申请人">
                    </el-table-column>
                    <el-table-column prop="checkPhone" label="联系方式">
                    </el-table-column>
                    <el-table-column prop="checkCard" label="身份证号">
                    </el-table-column>
                    <el-table-column prop="checkImg" label="资料">
                        <template slot-scope="scope">
                            <img :src="scope.row.checkImg" style="width: 100px;height: 40px;">
                        </template>
                    </el-table-column>
                    <el-table-column prop="checkType" label="审核状态">
                        <template slot-scope="scope">
                            {{getCheckTypeStr(scope.row.checkType) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="160">
                        <template  slot-scope="scope">
                            <el-button size="small" @click="updateType(scope.row,'company',1)">通过</el-button>
                            <el-button type="danger" size="small" @click="updateType(scope.row,'company',2)">驳回</el-button>
                            <!--<el-button type="primary" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <el-col :span="24" class="toolbar">
            <!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
            </el-pagination>
        </el-col>
    </section>
</template>

<script>
    import util from '../../common/js/util'
    import {  getAllCheck ,putCheckType} from '../../api/api';
    import axios from 'axios';
    export default {
        name: "CheckList",
        data(){
            return{
                studentCheck:[],
                teacherCheck:[],
                schoolCheck:[],
                companyCheck:[],
                activeName: 'first',
                filters:{
                    name:""
                },
                check:[],
                studentLoading:false,
                teacherLoading:false,
                schoolLoading:false,
                companyLoading:false,
                total: 0,
                page: 1,
            }
        },
        methods: {
            handleClick(tab, event) {
               // console.log(tab, event);
            },
            handleCurrentChange(){

            },
            getChecks(str){
                let para = {
                    size: 10,
                    page: this.page,
                    name: this.filters.name,
                    model:str
                };
                if(str == "student"){
                    this.studentLoading = true;
                }
                if(str == "school"){
                    this.schoolLoading = true;
                }
                if(str == "teacher"){
                    this.teacherLoading = true;
                }
                if(str == "company"){
                    this.companyLoading = true;
                }
                //NProgress.start();
                console.log(para);
                getAllCheck(para).then((res) => {
                    console.log(res);


                    if(str == "student"){
                        this.studentCheck = res.data.body;
                        this.studentLoading = false;
                        this.total = res.data.body.length;
                    }
                    if(str == "school"){
                        this.schoolCheck = res.data.body;
                        this.schoolLoading = false;
                        this.total = res.data.body.length;
                    }
                    if(str == "teacher"){
                        this.teacherCheck = res.data.body;
                        this.teacherLoading = false;
                        this.total = res.data.body.length;
                    }
                    if(str == "company"){
                        this.companyCheck = res.data.body;
                        this.companyLoading = false;
                        this.total = res.data.body.length;
                    }
                });
            },
            updateType(row,str,type){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then( () => {
                    if(str == "student"){
                        this.studentLoading = true;
                    }
                    if(str == "school"){
                        this.schoolLoading = true;
                    }
                    if(str == "teacher"){
                        this.teacherLoading = true;
                    }
                    if(str == "company"){
                        this.companyLoading = true;
                    }

                    let para = { id: row.checkId ,type: type};

                    putCheckType(para).then( res => {
                        if(str == "student"){
                            this.studentLoading = false;
                            this.getChecks("student");
                        }
                        if(str == "school"){
                            this.schoolLoading = false;
                            this.getChecks("school");
                        }
                        if(str == "teacher"){
                            this.teacherLoading = false;
                            this.getChecks("teacher");
                        }
                        if(str == "company"){
                            this.companyLoading = false;
                            this.getChecks("company");
                        }
                        util.getMessage(res,this,"审核状态已更新");
                    })
                })
            },
            getCheckTypeStr(type){
                if(type == 1){
                    return "已通过"
                }
                if(type == 0){
                    return "待审核"
                }
                if(type == 2){
                    return "已拒绝"
                }
            }
        },
        mounted() {
            this.getChecks("teacher");
            this.getChecks("school");
            this.getChecks("company");
            this.getChecks("student");
        }
    }
</script>

<style >


</style>